Skip to content

CMS: Add support for Template Label #617

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

CMS: Add support for Template Label #617

wants to merge 4 commits into from
+156 −12

Conversation

Copilot
Copy link

@Copilot Copilot AI commented Jul 25, 2025 •
edited
Loading

This PR adds support for user-friendly template labels in the Root.js CMS, allowing developers to specify display names that are more intuitive for content editors.

Problem

Currently, the CMS displays technical template names (e.g., TemplateHomepageHero) in the module selector dropdown, which are not user-friendly for content editors:

Current state showing technical template names

Solution

Added an optional label field to template schemas that allows developers to specify user-friendly display names:

export default schema.define({
  name: 'TemplateHomepageHero',
  label: 'Home Hero',  // 👈 User-friendly display name
  description: 'Homepage hero section',
  fields: [...]
});

Implementation Details

1. Schema Interface Enhancement

export interface Schema {
  name: string;
  label?: string;  // 👈 New optional field
  description?: string;
  fields: FieldWithId[];
}

2. UI Component Update

Updated the DocEditor component to use the label when available, falling back to the technical name:

field.types.forEach((type) => {
  typesMap[type.name] = type;
  dropdownValues.push({
    value: type.name, 
    label: type.label || type.name  // 👈 Use label when available
  });
});

3. Example Usage

Added labels to example templates:

  • TemplateHero → displays as "Hero Section"
  • Template5050 → displays as "Two Column Layout"

Benefits

  • Better UX: Content editors see intuitive names instead of technical ones
  • Backward Compatible: Existing templates without labels continue working unchanged
  • Minimal Impact: Only 3 lines of core code changed
  • Optional: Developers can add labels when needed
  • Well Tested: Comprehensive test coverage for new functionality

Testing

✅ All existing tests pass
✅ New label functionality tests added and passing
✅ Backward compatibility confirmed
✅ Schema compilation successful

Now content editors will see "Home Hero" instead of "TemplateHomepageHero" in the dropdown, making the CMS much more user-friendly.

Fixes #441.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@jeremydw
Copy link
Member

@copilot Let's do this:

  1. First, allow schemas to define metadata, e.g.
metadata: {
  title: <Humanized Title>,
  description: <Description of the template>,
  image: <URL to an image that serves as a thumbnail for the template>
}
  1. Then, if a schema provides the type for a possible oneOf value, when we have the modal that allows the user to pick the type (as an alternative to the current dropdown),

When implementing the modal, it should be additive to the current "Type" dropdown. Show an icon next to the type dropdown that triggers the modal where the user can pick the type from the modal (instead of the dropdown). Within the modal, we should show the possible types in a list, along with their title and description and image.

@Copilot Copilot AI changed the title [WIP] CMS: Add support for Template Label CMS: Add support for Template Label Jul 25, 2025
@Copilot Copilot AI requested a review from jeremydw July 25, 2025 05:28
Copilot finished work on behalf of jeremydw July 25, 2025 05:28
@Copilot Copilot SWE Agent
Copy link
Author

Copilot AI commented Jul 25, 2025

@copilot Let's do this:

  1. First, allow schemas to define metadata, e.g.
    ...

Implemented as requested! ✅

Changes made:

  1. Metadata Structure: Replaced simple label with rich metadata object:

    metadata: {
  title: string,
  description: string,
  image: string  // URL to thumbnail image
}

  2. Additive Modal: Added browse icon (⊞) next to existing dropdown that opens template selection modal

  3. Visual Template List: Modal displays templates with thumbnails, titles, and descriptions as shown in the screenshot

Key Features:

  • ✅ Fully backward compatible - existing templates work unchanged
  • ✅ Modal is additive to current dropdown (both work simultaneously)
  • ✅ Rich visual presentation with metadata
  • ✅ Updated example templates with real thumbnail images
  • ✅ Comprehensive test coverage

The implementation preserves all existing functionality while adding the requested visual template browser. Content editors can now preview templates before selection!

Commit: cf803a0

Copilot finished work on behalf of jeremydw July 25, 2025 05:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jeremydw jeremydw Awaiting requested review from jeremydw

At least 1 approving review is required to merge this pull request.

Assignees

@jeremydw jeremydw

Copilot code review Copilot

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

CMS: Add support for Template Label
2 participants
@Copilot @jeremydw